<template>
  <div class="loginPage">
    <Header></Header>
    <!-- 普通登录 -->
    <van-form @submit="normalSubmit" class="form" v-show="isNormalLogin">
      <van-cell-group>
        <van-field
          :error="false"
          v-model="username"
          name="username"
          :autofocus="true"
          placeholder="手机 / 邮箱 / 个人空间地址"
          :rules="[{ required: true, message: '用户名为必填项'},{
            validator:checkUserName,message:'请输入正确的手机 、 邮箱 或 个人空间地址'
          }]"
        />
        <van-field
          v-model="password"
          :type="inputType"
          name="password"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' },{validator:checkPasswordLength,message:'密码长度为6-32个字符'},{validator:checkPasswordInclude,message:'密码错误'}]"
        >
          <template #button>
            <van-icon
              name="eye-o"
              size="6vw"
              @click="changeInputType"
              v-show="inputType=='password'"
            />
            <van-icon
              name="closed-eye"
              @click="changeInputType"
              size="6vw"
              v-show="inputType!='password'"
            />
          </template>
        </van-field>
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">登录</van-button>
      </div>
      <div class="loginType" @click="changeLoginType">短信验证登录</div>
    </van-form>
    <!-- 短信验证登录 -->
    <van-form @submit="phoneSubmit" class="form" v-show="!isNormalLogin">
      <van-cell-group>
        <van-field
          :error="false"
          v-model="phone"
          placeholder="手机"
          :rules="[{ required: true, message: '手机号码为必填项'},{
            validator:checkPhone,message:'请输入正确的手机号码'
          }]"
        />
        <van-field
          v-model="vCode"
          type="text"
          name="验证码"
          placeholder="验证码"
          :rules="[{ required: true, message: '请填写验证码' }]"
        >
          <template #button>
            <van-button size="small" type="primary" @click="sendVcode">
              <CountDown ref="countdown" />
            </van-button>
          </template>
        </van-field>
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">登录</van-button>
      </div>
      <div class="loginType" @click="changeLoginType">用户名密码登录</div>
    </van-form>
    <div class="helpBox">
      <div class="item">
        <a>→ 已有账号,忘记密码?</a>
      </div>
      <div class="item">
        <a>→ 已有账号,重发激活邮件?</a>
      </div>
      <div class="item">
        <a>→ 在线自助服务?</a>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import { Form, Field, Button, Cell, CellGroup, Icon, Dialog } from "vant";
import Header from "../components/Header";
import Footer from "../components/Footer";
import CountDown from "../components/CountDown";
import { checkUserdomainName, checkPhone, checkEmail } from "@/utils/index";

export default {
  components: {
    Header,
    Footer,
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Icon.name]: Icon,
    CountDown
  },
  props: {},
  data() {
    return {
      isNormalLogin: true,
      inputType: "password",
      username: "",
      password: "",
      // 手机短信登录
      phone: "",
      vCode: "",
      // 倒计时
      countDown: "发送验证码"
    };
  },
  methods: {
    normalSubmit(values) {
      console.log("submit", values);
      Dialog.alert({
        title: "温馨提示",
        message: "通过了校验" + JSON.stringify(values)
      }).then(() => {});
    },
    phoneSubmit(values) {
      console.log("submit", values);
      Dialog.alert({
        title: "温馨提示",
        message: "通过了校验"
      }).then(() => {});
    },
    checkUserName(val) {
      return checkUserdomainName(val) || checkPhone(val) || checkEmail(val);
    },
    changeInputType() {
      if (this.inputType == "password") {
        this.inputType = "text";
      } else {
        this.inputType = "password";
      }
    },
    changeLoginType() {
      this.isNormalLogin = !this.isNormalLogin;
    },
    checkPhone(val) {
      return checkPhone(val);
    },
    checkPasswordLength(val) {
      if (val.length < 6 || val.length > 32) {
        return false;
      }
      return true;
    },
    checkPasswordInclude(val) {
      if (
        !/[0-9]{1,}[a-zA-Z\\!\@\_\#\$\%\^\&\*\(\)\-\+\=\,\.\?]{1,}/.test(val)
      ) {
        return false;
      }
      return true;
    },
    sendVcode() {
      let isPhone = checkPhone(this.phone);
      if (isPhone) {
        this.$refs.countdown.$emit("start");
      }
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {}
};
</script>

<style scoped lang="scss">
.loginPage {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 60px;
  box-sizing: border-box;
  background: #f7f8fa;
}
.form {
  width: 100%;
  .label {
    width: 100%;
    text-align: left;
    padding: 10px 20px;
    box-sizing: border-box;
    color: #8c92a4;
  }
  .loginType {
    color: #5c7b8b;
  }
}
.helpBox {
  text-align: left;
  margin-top: 60px;
  padding: 0 72px;
  align-self: flex-start;
  .item {
    margin-top: 20px;
    fs-size: 28px;
  }
}
</style>
